<template>
    <el-container class="main-container">
      <!-- 左侧栏 -->
      <el-aside width="300px" :class="{asideHiddle:isAsideHiddle}">
        <div class="person-left-box">
          <!-- 头部头像 -->
          <div class="avatar-box">
            <img src="https://picsum.photos/200/200?random=1" />
            <span>超级管理员</span>
            <div class="btn">网盘</div>
          </div>
          <!-- 个人信息 -->
          <div class="user-message-box">
            <ul>
              <li class="message-list">
                <span>部门：</span>
                <span>人事科</span>
              </li>
              <li class="message-list">
                <span>职位：</span>
                <span>副科长</span>
              </li>
              <li class="message-list">
                <span>邮箱：</span>
                <span>yehdjaks@163.com</span>
              </li>
              <li class="message-list">
                <span>电话：</span>
                <span>12306</span>
              </li>
            </ul>
          </div>
          <!-- 流程统计 -->
          <div class="task-num-box">
            <div class="task-item item-1">
              <div>流程统计</div>
              <div>56</div>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div class="task-item item-2">
              <div>累计公文</div>
              <div>2,344</div>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div class="task-item item-3">
              <div>完成任务</div>
              <div>8 <span class="all-task-num">/ 24</span></div>
            </div>
          </div>
        </div>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header class="edit-header">
          <!-- 查看/编辑 -->
          <div class="edit-header-box">
            <i class="iconfont" :class="[isAsideHiddle ? 'icon-right-circle': 'icon-left-circle']" @click="toggleAside"></i>
            <span class="title">控制面板</span>
            <el-button-group class="checkEditBtn">
              <el-button :class="{activeBtn: isActiveBtn}" icon="el-icon-monitor" @click="navCheck"
                >查看</el-button
              >
              <el-button :class="{activeBtn: !isActiveBtn}" icon="el-icon-edit" @click="navEdit">编辑</el-button>
            </el-button-group>
          </div>
        </el-header>
        <!-- 主体 -->
        <el-main class="content-main">
           <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  data () {
    return {
      isActiveBtn: true,
      isAsideHiddle: false
    }
  },
  methods: {
    // 跳转到编辑路由
    navEdit () {
      this.$router.push('/edit')
      if (this.isActiveBtn) {
        this.isActiveBtn = !this.isActiveBtn
      }
    },
    // 跳转到查看路由
    navCheck () {
      this.$router.push('/check')
      if (!this.isActiveBtn) {
        this.isActiveBtn = !this.isActiveBtn
      }
    },
    // 显示隐藏侧边栏
    toggleAside () {
      this.isAsideHiddle = !this.isAsideHiddle
    }
  },
  created () {
    // this.$router.push('/check')
  }
}
</script>

<style>
* {
  box-sizing: border-box;
  list-style: none;
}
.main-container {
  height: 100%;
}
/* 左部区域 */
.person-left-box {
  background-color: #fff;
  height: 100%;
  transition: 1s ease;
}
.asideHiddle {
  display: none;
}
/* 1-用户头像 */
.avatar-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
}
.avatar-box img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.avatar-box span {
  color: #424e5c;
  font-weight: bold;
  font-size: 1.2em;
  margin: 10px 0;
}
.avatar-box .btn {
  border: 1px solid #d7ddeb;
  padding: 5px 45px;
  border-radius: 4px;
  cursor: pointer;
}
/* 2-用户信息 */
.user-message-box {
  margin: 10px 20px;
  border-bottom: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
  padding: 10px 0;
}
.message-list {
  margin: 20px 0;
}
.message-list span:nth-child(1) {
  color: #7682a8;
  font-size: 14px;
}
.message-list span:nth-child(2) {
  color: #424e5c;
  font-size: 14px;
}
/* 3-任务统计 */
.task-num-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.task-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  font-size: 14px;
  color: #7682a8;
}
.task-item div:nth-child(2) {
  font-size: 2em;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 10px;
  font-weight: bold;
}
.item-3 .all-task-num {
  color: rgba(0, 0, 0, 0.45);
}
/* 右部区域 */
.content-box {
  display: flex;
  flex-direction: column;
}
/* 头部查看/编辑按钮区域 */
.edit-header-box {
  display: flex;
  height: 56px;
  background-color: #fff;
  align-items: center;
  position: relative;
  border-left: 1px solid #ebeef5;
}
.edit-header-box .title {
  margin-left: 40px;
  color: #424e5c;
  font-size: 1.2em;
  font-weight: bold;
}
.checkEditBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.edit-header {
  padding: 0px !important;
}
.icon-left-circle {
  position: absolute;
  top: 50%;
  left: -1.5%;
  transform: translate(1.5%, -50%);
  background-color: #FFF;
  color: rgba(163, 177, 204, 0.45);
  transition: .5s ease;
  cursor: pointer;
}
.icon-right-circle {
  color: rgba(163, 177, 204, 0.45);
  margin-left: 10px;
  transition: .5s ease;
  cursor: pointer;
}
.icon-left-circle:hover {
  position: absolute;
  background-color: #409EFF;
  color: #fff;
  border-radius: 15px;
  padding: 1px 10px 1px 5px;
  left: -2.5%;
  transform: translate(3%,-50%) scale(0.7);
}
.icon-right-circle:hover {
  background-color: #409EFF;
  color: #fff;
  border-radius: 15px;
  padding: 1px 5px 1px 10px;
  transform: scale(0.7);
}
/* 组件主体 */
.content-main {
  padding: 0 0px 10px 0px !important;
}
/* 按钮选中样式 */
.activeBtn {
  color: #409EFF !important;
  border-color: #c6e2ff !important;
  background-color: #ecf5ff !important;
}
</style>
